<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关于我们</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .header {
            height: 48px;
            width: 100%;
            /*background-color: turquoise;*/
        }
        /*   导航栏背景色  */
        .ul-top {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        /*使左边部分在一行*/
        .li-top {
            float: left;
            border-right:1px solid #bbb;
        }
        /*分隔线*/
        /*.li-top:last-child {*/
        /*    border-right: none;*/
        /*}*/
        /*导航栏文字*/
        .li-top a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*光标所指的导航栏链接变色*/
        .li-top a:hover:not(.active) {
            background-color: #111;
            text-decoration: none;
            color: white;
        }
        /*-搜索框*/

        /*图标*/
        #logo{
            width: 55px;
            height: 45px;
            position: absolute;
            left: 320px;
            top: 75px;
            background: url("../images/主页/logo.png");
            /*background-position: 3px 0px;*/
            background-size: contain;
        }
        /*搜索栏*/
        .autocomplete {
            /*容器定位设置为 relative:*/
            display: inline-block;
            position: absolute;
            left: 405px;
            top: 50px;
        }
        input {
            border: 1px solid transparent;
            background-color: #f1f1f1;
            padding: 12px;
            font-size: 16px;
        }
        input[type=text] {
            background-color: #f1f1f1;
            width: 100%;
        }
        /*提交栏*/
        input[type=submit] {
            position: absolute;
            top: 50px;
            left: 733px;
            background-color: DodgerBlue;
            color: #fff;
        }
        .main {
            height: 210px;
            width: 100%;
            /*background-color: #4CAF50;*/
        }
        .main .header{
            height: 50px;
            width: 100%;
        }

        /*轮播*/
        #d2{
            width:95%;
            height:420px;
            margin: auto;

        }
        /*左右按钮的位置*/
        .carousel-control-prev-icon{
            position: absolute;
            left:228px;
        }
        .carousel-control-next{
            position: absolute;
            left:840px;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

</head>
<body  background="../images/菜单/餐厅图/5.jpeg" >
<div class="header">
    <ul class="ul-top">
        <li class="li-top"><a style="color: white">欢迎光临，约Fun!</a></li>
        <li class="li-top"><a  href="1主页.html">首页</a></li>
        <li class="li-top" style="float:right"><a href="3登录.html">登录</a></li>
        <li class="li-top" style="float:right"><a href="#about">收藏</a></li><li class="li-top" style="float:right">
        <a href="5我的Fun桌.html">我的Fun桌</a></li>
    </ul>
</div>

<div class="main">
    <div class="header">
        <!--logo-->
        <div id="logo"></div>
        <!--    搜索框-->
        <div id="search">
            <!-- autocomplete="off" 确保表单已关闭自动填充功能： -->
            <form autocomplete="off" action="/index.php">
                <div class="autocomplete" style="width:300px;position: relative;top: 25px">
                    <input id="myInput" type="text" name="s" placeholder="今天吃什么？">
                </div>
                <input type="submit" style="position: relative;top: 25px;left: 430px"value="确定">
            </form>
            <script>
                var sites = ["西红柿炒鸡蛋","青椒肉丝","糖醋排骨","Wiki","Zhihu","Baidu","Sina","Tmall","JD","Alibaba","QQ","Weixin","R","Rust","Python","Ruby"];

                function autocomplete(inp, arr) {
                    /*自动填充函数有两个参数，input 输入框元素和自动填充的数组*/
                    var currentFocus;
                    /* 监听 input 输入框，当在 input 输入框元素中时执行以下函数*/
                    inp.addEventListener("input", function(e) {
                        var a, b, i, val = this.value;
                        /*关闭已打开的自动填充列表*/
                        closeAllLists();
                        if (!val) { return false;}
                        currentFocus = -1;
                        /*创建 DIV 元素用于放置自动填充列表的值*/
                        a = document.createElement("DIV");
                        a.setAttribute("id", this.id + "autocomplete-list");
                        a.setAttribute("class", "autocomplete-items");
                        /*DIV 作为自动填充容器的子元素*/
                        this.parentNode.appendChild(a);
                        /*循环数组*/
                        for (i = 0; i < arr.length; i++) {
                            /*检查填充项是否有与文本字段值相同的内容，不区分大小写*/
                            if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
                                /*为每个匹配元素创建一个 DIV 元素 */
                                b = document.createElement("DIV");
                                /*匹配项加粗*/
                                b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
                                b.innerHTML += arr[i].substr(val.length);
                                /*选中的填充项插入到隐藏 input 输入字段，用于保存当前选中值*/
                                b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
                                /*当有人点击填充项（DIV 元素）时执行函数*/
                                b.addEventListener("click", function(e) {
                                    /*选中的填充项插入到隐藏 input 搜索字段*/
                                    inp.value = this.getElementsByTagName("input")[0].value;
                                    /*关闭自动填充列表*/
                                    closeAllLists();
                                });
                                a.appendChild(b);
                            }
                        }
                    });
                    /*按下键盘上的一个键时执行函数*/
                    inp.addEventListener("keydown", function(e) {
                        var x = document.getElementById(this.id + "autocomplete-list");
                        if (x) x = x.getElementsByTagName("div");
                        if (e.keyCode == 40) {
                            /*如果按下箭头向下键，currentFocus 变量加 1，即向下移动一位*/
                            currentFocus++;
                            /*使当前选中项更醒目*/
                            addActive(x);
                        } else if (e.keyCode == 38) { //up
                            /*按下箭头向上键，选中列表项向上移动一位*/
                            currentFocus--;
                            /*使当前选中项更醒目*/
                            addActive(x);
                        } else if (e.keyCode == 13) {
                            /*如果按下 ENTER 键，阻止提交，你也可以设置 submit 提交*/
                            e.preventDefault();
                            if (currentFocus > -1) {
                                /*模拟点击选中项*/
                                if (x) x[currentFocus].click();
                            }
                        }
                    });
                    function addActive(x) {
                        /*设置选中的选项函数*/
                        if (!x) return false;
                        /*移动选项设置不同选中选项的背景颜色*/
                        removeActive(x);
                        if (currentFocus >= x.length) currentFocus = 0;
                        if (currentFocus < 0) currentFocus = (x.length - 1);
                        /*添加 "autocomplete-active" 类*/
                        x[currentFocus].classList.add("autocomplete-active");
                    }
                    function removeActive(x) {
                        /*移除没有选中选项的 "autocomplete-active" 类*/
                        for (var i = 0; i < x.length; i++) {
                            x[i].classList.remove("autocomplete-active");
                        }
                    }
                    function closeAllLists(elmnt) {
                        /*关闭自动添加列表*/
                        var x = document.getElementsByClassName("autocomplete-items");
                        for (var i = 0; i < x.length; i++) {
                            if (elmnt != x[i] && elmnt != inp) {
                                x[i].parentNode.removeChild(x[i]);
                            }
                        }
                    }
                    /*点击 HTML 文档任意位置关闭填充列表*/
                    document.addEventListener("click", function (e) {
                        closeAllLists(e.target);
                    });
                }

                autocomplete(document.getElementById("myInput"), sites);
            </script>
        </div>
    </div>
</div>

    <!-- 轮播 -->
    <div class="c1">
        <div id="d2" class="carousel slide" data-bs-ride="carousel"  style="position: relative;top: -170px">
            <!-- 指示符 -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
            </div>
            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../images/菜单/餐厅图/1.jpeg" class="d-block" style="position:relative;top: 50px;width:65%;height:450px;margin: auto">
                </div>
                <div class="carousel-item">
                    <img src="../images/菜单/餐厅图/2.jpeg" class="d-block" style="position:relative;top: 50px;width:65%;height:450px;margin: auto">
                </div>
                <div class="carousel-item">
                    <img src="../images/菜单/餐厅图/3.jpeg" class="d-block" style="position:relative;top: 50px;width:65%;height:450px;margin: auto">
                </div>
            </div>
            <!-- 左右切换按钮 -->
            <button class="carousel-control-prev" type="button" data-bs-target="#d2" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#d2" data-bs-slide="next">
                <span class="carousel-control-next-icon"> </span>
            </button>
        </div>
        <div style="height: 220px;width: 62%;background: white;opacity: 50%;position: relative;top: -100px;left: 230px">
            <div style="height: 170px;width: 90%;position: relative;opacity: 100%;left: 50px;top: 30px">
            <h>
               《约Fun》是一个集线上教学，线下餐厅，和外卖配送的一个美食网站，满足消费者的三餐及休闲小吃，满足用户对美食的需求及参与，目前的项目进度为实现了计划目标，能完美的呈现出网页各个界面并实现运行，用户进入网站并选择登录，就可选择在家教学或者外卖配送或者网上预订餐厅位置，满足当代消费者的意愿，并为餐厅的管理提供帮助
                <br>
                <br>
                <h  style="float: right">
                    详细咨询：233-876-655
                    <br>
                    订餐热线：456-234-244
                </h>

            </h>
            </div>
        </div>
    </div>

</body>
</html>